<template>
  <div>
    <div class="container">
      <div class="left">
        <div class="info">
          <div class="user_head">
            <img :src="songlist.coverImgUrl" />
          </div>
          <!-- 歌曲信息 -->
          <div class="user_info">
            <h3>{{ songlist.name }}</h3>
            <div class="user_infoa">
              <img :src="songlist.creator.avatarUrl" />
              <router-link to="#"
                ><span>{{ songlist.creator.nickname }}</span></router-link
              >
              <p>{{ timestampToTime(songlist.createTime) }} 创建</p>
            </div>
            <div class="user_infob">
              <router-link to="#"
                ><span class="iconfont icon-bofang" style="padding: 9px"
                  >播放</span
                ></router-link
              >
              <router-link to="#"
                ><span class="b iconfont icon-shoucang"
                  >（{{ songlist.subscribedCount }}）</span
                ></router-link
              >
              <router-link to="#"
                ><span class="b iconfont icon-fenxiang"
                  >（{{ songlist.shareCount }}）</span
                ></router-link
              >
              <router-link to="#"
                ><span class="b iconfont icon-xiazai">下载</span></router-link
              >
              <router-link to="#"
                ><span class="b iconfont icon-pinglun"
                  >（{{ songlist.commentCount }}）</span
                ></router-link
              >
            </div>
            <div class="user_infoc">
              标签：<span v-for="(v, i) in songlist.tags" :key="i">{{
                v
              }}</span>
            </div>
            <div class="user_infod">
              介绍：<span class="dd"> {{ songlist.description }}</span>
            </div>
          </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="songList">
          <div class="top">
            <div class="top_left">
              <h3>歌曲列表</h3>
              <span>{{ songlist.trackCount }}首歌</span>
            </div>
            <div class="top_right">
              
              <span
                >播放：<b>{{ songlist.playCount }}</b
                >次</span
              >
            </div>
          </div>
          <!-- 歌曲表格 -->
          <table>
            <thead>
              <tr>
                <td></td>
                <td>歌曲标题</td>
                <td>时长</td>
                <td>歌手</td>
                <td>专辑</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(v, i) in tracks" :key="i">
                <td width="20px">
                  <span>{{ i + 1 }}</span><span class="iconfont icon-bofang" @click="getmusicId(v.id)"></span>
                </td>
                <td >
                  <router-link :to="`/songinfo/${v.id}`">{{ v.name }}</router-link> 
                </td>
                <td>{{ changetime(v.dt) }}</td>
                <td >
                  <span v-for="(w,q) in v.ar" :key="q"><span v-if="q > 0">/</span><router-link :to="`/SingerInfo/${w.id}`">{{ w.name }}</router-link></span>
                </td>
                <td >
                  <router-link :to="`/albuminfo/${v.al.id}`">{{ v.al.name }}</router-link> 
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 查看更多歌曲 -->
        <div class="more">
          <p>查看更多内容，请下载客户端</p>
          <router-link to="#"><span>立即下载</span></router-link>
        </div>
        <!-- 评论 -->
        <div class="comment">
          <Comment :songSheet="songSheet"></Comment>
        </div>
      </div>
      <div class="right">
        <h3><span>喜欢这个歌单的人</span></h3>
        <div class="user_portrait">
          <ul>
            <li v-for="(v, i) in userlist" :key="i">
              <router-link to="#">
                <img :src="v.avatarUrl" />
              </router-link>
            </li>
          </ul>
        </div>
        <h3><span>热门歌单</span></h3>
        <div class="hotsong" v-for="(v, i) in hotsonglist" :key="i">
          <div class="hotsong_left">
            <router-link :to="`/songlist/${v.id}`">
            <img :src="v.coverImgUrl" /></router-link>
          </div>
          <div class="hotsong_right">
            <div class="hotsong_right_top">
              <router-link :to="`/songlist/${v.id}`"><span>{{ v.name }}</span></router-link
              >
            </div>
            <div class="hotsong_right_bottom">
              by<router-link to="#"
                ><span>{{ v.creator.nickname }}</span></router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapMutations } from "vuex";
import Comment from "../components/Comment.vue";
export default {
  components: { Comment },
  data() {
    return {
      songSheet:true,
      songlist: {
        creator: {
          avatarUrl: "",
        },
      },
      //喜欢这个歌单的人
      userlist: {
        avatarUrl: "",
      },
      // 热门歌单
      hotsonglist: {},
      tracks: {},
    };
  },
  created() {
    this.getData();
    this.gethotsong();
  },
  methods: {
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/playlist/detail?id=${this.$route.params.id}`
        )
        .then((res) => {
          this.songlist = res.data.playlist;
          this.userlist = res.data.playlist.subscribers;
          this.tracks = res.data.playlist.tracks;
        });
    },
    gethotsong() {
      axios.get(`http://127.0.0.1:3000/related/playlist?id=${this.$route.params.id}`).then((res) => {
        this.hotsonglist = res.data.playlists;
      });
    },
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate();
      return Y + M + D;
    },
    ...mapMutations(["getmusicId"]),
    changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
  },
};
</script>
<style scoped>
.container {
  width: 980px;
  margin: 0 auto;
  display: flex;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  background-color: #fff;
}
.left {
  width: 710px;
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 39px;
}
.left .info {
  display: flex;
  margin-bottom: 20px;
}
.left .info .user_head {
  width: 208px;
  height: 208px;
  padding: 3px;
  border: 1px solid #ccc;
}
.left .info .user_head img {
  width: 200px;
  height: 200px;
}
.left .info .user_info {
  margin-left: 30px;
}
.left .info .user_info h3 {
  margin-bottom: 10px;
}
.left .info .user_info .user_infoa {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.left .info .user_info .user_infoa img {
  width: 40px;
  height: 40px;
}
.left .info .user_info .user_infoa span {
  margin: 0 10px;
  font-size: 12px;
  color: #0c73c2;
  line-height: 26px;
}
.left .info .user_info .user_infoa p {
  font-size: 12px;
  color: #999999;
}
.left .info .user_info .user_infob {
  margin-bottom: 35px;
}
.left .info .user_info .user_infob span {
  padding: 5px;
  background-color: #2374c2;
  margin-right: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
}
.left .info .user_info .user_infob .b {
  padding: 8px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #cdcdcd;
}
.left .info .user_info .user_infoc {
  font-size: 12px;
  margin-bottom: 10px;
  color: #666666;
}
.left .info .user_info .user_infoc span {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 2px 12px;
  border-radius: 15px;
  margin: 0 5px;
}
.left .info .user_info .user_infod {
  font-size: 12px;
  color: #666666;
}
.dd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 歌曲列表 */
.left .songList .top {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #c20c0c;
}
.left .songList .top .top_left {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.left .songList .top .top_left h3 {
  font-size: 20px;
  font-weight: 400;
}
.left .songList .top .top_left span {
  font-size: 12px;
  margin-left: 20px;
  color: #666666;
}
.left .songList .top .top_right {
  display: flex;
  align-items: center;
}
.left .songList .top .top_right {
  display: flex;
  align-items: center;
}

.left .songList .top .top_right span {
  font-size: 12px;
  color: #666666;
}
.left .songList .top .top_right b {
  font-size: 12px;
  color: #c20c0c;
}
/* 歌曲表格 */
.left .songList table {
  table-layout: fixed;
  width: 100%;
  font-size: 12px;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  padding: 0;
  margin-bottom: 30px;
}
.left .songList table thead tr td {
  height: 40px;
  background-color: #f7f7f7;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.left .songList table td {
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
  cursor: pointer;
}
.left .songList table td:nth-child(1) {
  width: 70px;
}
.left .songList table td:nth-child(1) span:nth-child(2) {
  float: right;
  font-size: 20px;
  color: #b2b2b2;
}
.left .songList table td:nth-child(3) {
  width: 90px;
}
.left .songList table td:nth-child(4) {
  width: 90px;
}
.left .songList table td:nth-child(5) {
  width: 140px;
}
.left .songList table tbody tr {
  background-color: #f7f7f7;
}
.left .songList table tbody tr:nth-child(2n) {
  background-color: #fff;
}
.left .songList table tbody tr td:nth-child(1) span:nth-child(2):hover{
  color: #333;
}
.left .songList table tbody tr td a:hover{
  text-decoration: underline;
}
/* 查看更多歌曲 */
.more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.more p {
  font-size: 13px;
  margin-bottom: 20px;
}
.more span {
  padding: 8px 35px;
  border-radius: 15px;
  font-size: 12px;
  color: #fff;
  background-color: #ff251a;
}
/* 评论 */
.comment {
  margin-top: 40px;
}
/* 右侧 */
.right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
.right h3 {
  display: flex;
  align-items: start;
  padding-bottom: 7px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.right h3 span {
  font-size: 12px;
}
.user_portrait {
  margin-bottom: 25px;
}
.user_portrait ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.user_portrait ul li {
  margin-bottom: 5px;
}
.user_portrait img {
  width: 41px;
  height: 40px;
}
/* 热门歌单 */
.hotsong {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.hotsong .hotsong_left img {
  width: 50px;
  height: 50px;
}
.hotsong .hotsong_right {
  width: 140px;
  margin-left: 10px;
  font-size: 12px;
  color: #999999;
}
.hotsong .hotsong_right .hotsong_right_top span {
  display: block;
  width: 140px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
}
.hotsong .hotsong_right .hotsong_right_top span:hover {
  text-decoration: underline;
}
.hotsong .hotsong_right .hotsong_right_bottom{
  margin-top: 10px;
}
.hotsong .hotsong_right .hotsong_right_bottom span {
  margin-left: 6px;
  color: #666;
}
.hotsong .hotsong_right .hotsong_right_bottom span:hover {
  text-decoration: underline;
}
</style>